import React, { useEffect, useRef, useState } from 'react';

export default function Demo() {
  const testARef = useRef([]);
  useEffect(() => {
    window.console.log('useEffect', { A: testARef.current });
  }, [testARef.current]);

  const [b, setB] = useState(0);
  const testBRef = useRef([]);
  useEffect(() => {
    window.console.log('useEffect', { B: testBRef.current });
  }, [testBRef.current]);
  return (
    <>
      <div
        onClick={() => {
          testARef.current = [...testARef.current, 1];
          window.console.log('onClick1', { A: testARef.current });
        }}
      >
        Example1
      </div>
      <div
        style={{ marginTop: 20 }}
        onClick={() => {
          testBRef.current = [...testBRef.current, 1];
          window.console.log('onClick2', { B: testBRef.current });
          setB(b + 1);
        }}
      >
        Example2
      </div>
    </>
  );
}
